CSS color

CSS color allows web developers to define and control the visual appearance of elements on web pages. It offers various methods such as keywords (red, blue), hexadecimal (#RRGGBB), RGB (rgb(255, 0, 0)), and RGBA (rgba(255, 0, 0, 0.5) for transparency). These methods enable precise customization of text and background colors, ensuring aesthetic consistency and accessibility compliance across different browsers and devices.Here's a comprehensive overview of CSS color, covering its syntax, color representation methods, transparency, practical applications:

Color Representation Methods:

In CSS, there are several methods for specifying colors, each suited for different needs and preferences:
1. Keywords: CSS provides predefined color keywords that can be used directly. For example: red, blue, green, yellow, etc.

Example

														
														
<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
   body{
    background-color: LavenderBlush;
   }
   h1{
    color: tomato;
   }
   p{
    color: blue;
   }
</style>
</head>
<body>
    <h1 align="center">CSS</h1>
    <p align="center">Welcome to PBA INSTITUTE</p>
</body>
</html>

														
														
													

OUTPUT:

CSS

Welcome to PBA INSTITUTE

2. Hexadecimal Notation: Hexadecimal colors are represented with a # followed by either 3 or 6 hexadecimal digits (0-9, A-F) representing RGB (Red, Green, Blue) values.

Example

														
														
<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
  body{
  	background-color: #A4A6A6 ;
  }
  h1{
    color: #ff0000; /* red */
  }
  p{
    color: #306E41; /* green */
  }
</style>
</head>
<body>
    <h1 align="center">CSS</h1>
    <p align="center">Welcome to PBA INSTITUTE</p>
</body>
</html>

														
														
													

OUTPUT:

3. RGB Functional Notation: RGB notation allows specifying colors by their Red, Green, and Blue component values. Each value ranges from 0 to 255.

Example

														
														
<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
  body{
  	background-color: rgb(163, 228, 215);
  }
  h1{
    color: rgb(231, 76, 60);
  }
  p{
    color: rgb(46, 79, 116);
  }
</style>
</head>
<body>
    <h1 align="center">CSS</h1>
    <p align="center">Welcome to PBA INSTITUTE</p>
</body>
</html>

														
														
													

OUTPUT:

4. RGBA Functional Notation :RGBA is similar to RGB but includes an additional parameter for opacity (alpha), which ranges from 0 (fully transparent) to 1 (fully opaque).

Example

														
														
<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
  body{
  	background-color: rgba(116, 137, 181, 0.31);
  }
  h1{
    color: rgba(255, 99, 71, 1);
  }
  p{
    color: rgba(29, 54, 106, 0.83);
  }
</style>
</head>
<body>
    <h1 align="center">CSS</h1>
    <p align="center">Welcome to PBA INSTITUTE</p>
</body>
</html>

														
														
													

5. HSL Functional Notation: It Specifies colors using the Hue-Saturation-Lightness color model.hsl(hue, saturation%, lightness%), where hue is an angle from 0 to 360 degrees, and saturation and lightness are percentages.

Example

														
														
<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
 h1{
    color: hsl(210, 100%, 50%); 
 }
 p{
    color: hsl(65, 100%, 50%); 
 }
</style>
</head>
<body>
    <h1>CSS</h1>
    <p>Welcome to PBA INSTITUTE</p>
</body>
</html>

														
														
													

6. HSLA Functional Notation: It is similar to HSL, but includes an alpha channel for transparency.hsla(hue, saturation%, lightness%, alpha), where alpha is a number between 0 (transparent) and 1 (opaque).

Example

														
														
<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
 h1{
    color: hsla(240, 100%, 50%, 0.7); 
 }
 p{
    color: hsla(60, 100%, 50%, 0.7);
 }
</style>
</head>
<body>
    <h1>CSS</h1>
    <p>Welcome to PBA INSTITUTE</p>
</body>
</html>

														
														
													

Conclusion :

In conclusion, CSS color plays a crucial role in web design by enhancing user experience through aesthetic appeal and visual hierarchy. It helps convey information, create mood, and establish brand identity. Effective color usage in CSS ensures readability, accessibility, and consistency across devices, contributing significantly to overall design coherence and user engagement.

CSS color

Color Representation Methods:

CSS

Conclusion :

CSS All Topics

SHARE